<template>
  <div class="app-container">
    <el-tabs v-model="active" ref="tabs">
      <el-tab-pane name="first">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="queryParams.all" placeholder="支持姓名/工号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getList" type="primary">查询</el-button>
            <el-button type="warning">重置</el-button>
          </el-form-item>
        </el-form>
        <el-tabs v-model="queryParams.empStatus" @tab-click="getList" type="card">
          <el-tab-pane name="9">
            <div slot="label">在职 ({{ statisticsNum.count0 }})人</div>
            <el-table v-loading="loading" :data="empSalaryList" style="width: 100%">
              <el-table-column align="center" prop="empName" label="姓名" width="80"></el-table-column>
              <el-table-column align="center" prop="jobNo" label="工号" width="80"></el-table-column>
              <el-table-column align="center" prop="deptName" label="部门" width="90"></el-table-column>
              <el-table-column align="center" prop="stationName" label="岗位" width="140"></el-table-column>
              <el-table-column align="center" prop="workNature" label="工作性质" width="90"></el-table-column>
              <el-table-column align="center" prop="empStatus" label="员工状态" width="90">
                <template slot-scope="scope">
                  <span v-if="scope.row.empStatus === '3'">试用</span>
                  <span v-if="scope.row.empStatus === '4'">正式</span>
                  <span v-if="scope.row.empStatus === '6'">离职</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="entryDate" label="入职日期" width="100"></el-table-column>
              <el-table-column align="center" prop="memberDate" label="转正日期" width="100"></el-table-column>
              <el-table-column align="center" prop="sumLater" label="薪资" width="90">
                <template slot-scope="scope">
                  <span v-if="scope.row.sumLater !== undefined && scope.row.sumLater !== null">{{
                      scope.row.sumLater.toFixed(2)
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="salaryName" label="薪酬模板" :show-overflow-tooltip="true"
                               width="140"></el-table-column>
              <el-table-column align="center" prop="effectiveDate" label="最新调整日期" width="100">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="cause" label="调薪原因"
                              ></el-table-column>
              <el-table-column align="center" prop="remark" label="备注" :show-overflow-tooltip="true"
                              ></el-table-column>
              <el-table-column fixed="right" align="center" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text" @click="secondClick(scope.row)">调薪</el-button>
                  <el-button type="text" @click="thirdClick(scope.row)">薪酬档案</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
          <el-tab-pane name="4">
            <div slot="label">正式 ({{ statisticsNum.count2 }})人</div>
            <el-table v-loading="loading" :data="empSalaryList" style="width: 100%">
              <el-table-column align="center" prop="empName" label="姓名" width="80"></el-table-column>
              <el-table-column align="center" prop="jobNo" label="工号" width="80"></el-table-column>
              <el-table-column align="center" prop="deptName" label="部门" width="90"></el-table-column>
              <el-table-column align="center" prop="stationName" label="岗位" width="140"></el-table-column>
              <el-table-column align="center" prop="workNature" label="工作性质" width="90"></el-table-column>
              <el-table-column align="center" prop="empStatus" label="员工状态" width="90">
                <template slot-scope="scope">
                  <span v-if="scope.row.empStatus === '3'">试用</span>
                  <span v-if="scope.row.empStatus === '4'">正式</span>
                  <span v-if="scope.row.empStatus === '6'">离职</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="entryDate" label="入职日期" width="100"></el-table-column>
              <el-table-column align="center" prop="memberDate" label="转正日期" width="100"></el-table-column>
              <el-table-column align="center" prop="sumLater" label="薪资" width="90">
                <template slot-scope="scope">
                  <span v-if="scope.row.sumLater !== undefined && scope.row.sumLater !== null">{{
                      scope.row.sumLater.toFixed(2)
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="salaryName" label="薪酬模板" :show-overflow-tooltip="true"
                               width="140"></el-table-column>
              <el-table-column align="center" prop="effectiveDate" label="最新调整日期" width="100">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="cause" label="调薪原因"></el-table-column>
              <el-table-column align="center" prop="remark" label="备注" :show-overflow-tooltip="true"
                               ></el-table-column>
              <el-table-column fixed="right" align="center" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text" @click="secondClick(scope.row)">调薪</el-button>
                  <el-button type="text" @click="thirdClick(scope.row)">薪酬档案</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
          <el-tab-pane name="3">
            <div slot="label">试用 ({{ statisticsNum.count1 }})人</div>
            <el-table v-loading="loading" :data="empSalaryList" style="width: 100%">
              <el-table-column align="center" prop="empName" label="姓名" width="80"></el-table-column>
              <el-table-column align="center" prop="jobNo" label="工号" width="80"></el-table-column>
              <el-table-column align="center" prop="deptName" label="部门" width="90"></el-table-column>
              <el-table-column align="center" prop="stationName" label="岗位" width="140"></el-table-column>
              <el-table-column align="center" prop="workNature" label="工作性质" width="90"></el-table-column>
              <el-table-column align="center" prop="empStatus" label="员工状态" width="90">
                <template slot-scope="scope">
                  <span v-if="scope.row.empStatus === '3'">试用</span>
                  <span v-if="scope.row.empStatus === '4'">正式</span>
                  <span v-if="scope.row.empStatus === '6'">离职</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="entryDate" label="入职日期" width="100"></el-table-column>
              <el-table-column align="center" prop="memberDate" label="转正日期" width="100"></el-table-column>
              <el-table-column align="center" prop="sumLater" label="薪资" width="90">
                <template slot-scope="scope">
                  <span v-if="scope.row.sumLater !== undefined && scope.row.sumLater !== null">{{
                      scope.row.sumLater.toFixed(2)
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="salaryName" label="薪酬模板" :show-overflow-tooltip="true"
                               width="140"></el-table-column>
              <el-table-column align="center" prop="effectiveDate" label="最新调整日期" width="100">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="cause" label="调薪原因"
                              ></el-table-column>
              <el-table-column align="center" prop="remark" label="备注" :show-overflow-tooltip="true"
                               ></el-table-column>
              <el-table-column fixed="right" align="center" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text" @click="secondClick(scope.row)">调薪</el-button>
                  <el-button type="text" @click="thirdClick(scope.row)">薪酬档案</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
          <el-tab-pane name="6">
            <div slot="label">离职 ({{ statisticsNum.count3 }})人</div>
            <el-table v-loading="loading" :data="empSalaryList" style="width: 100%">
              <el-table-column align="center" prop="empName" label="姓名" width="80"></el-table-column>
              <el-table-column align="center" prop="jobNo" label="工号" width="80"></el-table-column>
              <el-table-column align="center" prop="deptName" label="部门" width="90"></el-table-column>
              <el-table-column align="center" prop="stationName" label="岗位" width="140"></el-table-column>
              <el-table-column align="center" prop="workNature" label="工作性质" width="90"></el-table-column>
              <el-table-column align="center" prop="empStatus" label="员工状态" width="90">
                <template slot-scope="scope">
                  <span v-if="scope.row.empStatus === '3'">试用</span>
                  <span v-if="scope.row.empStatus === '4'">正式</span>
                  <span v-if="scope.row.empStatus === '6'">离职</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="entryDate" label="入职日期" width="100"></el-table-column>
              <el-table-column align="center" prop="memberDate" label="转正日期" width="100"></el-table-column>
              <el-table-column align="center" prop="sumLater" label="薪资" width="90">
                <template slot-scope="scope">
                  <span v-if="scope.row.sumLater !== undefined && scope.row.sumLater !== null">{{
                      scope.row.sumLater.toFixed(2)
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="salaryName" label="薪酬模板" :show-overflow-tooltip="true"
                               width="140"></el-table-column>
              <el-table-column align="center" prop="effectiveDate" label="最新调整日期" width="100">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="cause" label="调薪原因" ></el-table-column>
              <el-table-column align="center" prop="remark" label="备注" :show-overflow-tooltip="true"
                               ></el-table-column>
              <el-table-column align="center" fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text" @click="thirdClick(scope.row)">薪酬档案</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane name="second">
        <div>
          <el-button @click="firstClick">返回</el-button>
          <span style="font-size: 20px;margin-left: 30px">员工调薪</span>
        </div>
        <br>
        <div style="margin: 30px">
          <i class="el-icon-user-solid"></i>&nbsp;
          <span style="font-size: 20px">员工信息</span>
          <hr>
          <br>
          <el-descriptions style="font-size: 18px;margin-left: 30px">
            <el-descriptions-item label="姓名">{{ emp.empName }}</el-descriptions-item>
            <el-descriptions-item label="工号">{{ emp.jobNo }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ emp.deptName }}</el-descriptions-item>
            <el-descriptions-item label="岗位">{{ emp.stationName }}</el-descriptions-item>
            <el-descriptions-item label="工作性质">{{ emp.workNature }}</el-descriptions-item>
            <el-descriptions-item label="驻场公司">{{ emp.enterprise }}</el-descriptions-item>
            <el-descriptions-item label="职称">{{ emp.title }}</el-descriptions-item>
            <el-descriptions-item label="入职日期">{{ emp.entryDate }}</el-descriptions-item>
            <el-descriptions-item label="员工状态">
              <span v-if="emp.empStatus !== ''">
                <span v-if="emp.empStatus === '3'">试用</span>
                <span v-if="emp.empStatus === '4'">正式</span>
              </span>
            </el-descriptions-item>
          </el-descriptions>
          <br>
          <i class="el-icon-s-grid"></i>&nbsp;
          <span style="font-size: 20px">岗位定薪</span>
          <hr>
          <br>
          <el-form style="margin-left: 30px" label-position="left" ref="formSalary" :rules="formSalaryRules"
                   label-width="120px" :model="formSalary">
            <el-form-item prop="comId" label="薪酬模板">
              <div style="float: left;width:900px">
                <el-radio-group v-model="formSalary.comId">
                  <el-radio @change="changeCom" v-for="item in comList" :label="item.id" border>
                    {{ item.name }}
                  </el-radio>
                </el-radio-group>
              </div>
              <div style="float: right">
                <el-pagination
                  :current-page.sync="comParams.pageNum"
                  :page-size="comParams.pageSize"
                  layout="total, prev, pager, next"
                  @current-change="getGroup"
                  :total="comTotal">
                </el-pagination>
              </div>
            </el-form-item>
            <el-form-item prop="salaryItems" label="定薪明细">
              <el-row :gutter="24">
                <el-col :span="11">
                  试用
                  <el-table :cell-class-name="tableCellClassName"
                            :header-cell-style="{background:'#cccccc'}"
                            :data="salaryItems">
                    <el-table-column align="center" prop="typeName"

                                     label="定薪项目"></el-table-column>
                    <el-table-column align="center" prop="periodFront" label="调薪前">
                      <template slot-scope="scope">
                        <el-input
                          v-if="scope.row.typeName === '奖金' || scope.row.typeName === '销售提成' ||scope.row.typeName === '招聘提成'"
                          type="text" :disabled="true"></el-input>
                        <el-input :disabled="true" v-else type="text" :value="scope.row.periodLater"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="11">
                  <br>
                  <el-table :cell-class-name="tableCellClassName"
                            :header-cell-style="{background:'#cccccc'}"
                            :data="formSalary.salaryItems">
                    <el-table-column align="center" prop="typeName"
                                     label="定薪项目"></el-table-column>
                    <el-table-column align="center" prop="periodLater" label="调薪后">
                      <template slot-scope="scope">
                        <el-input
                          v-if="scope.row.typeName === '奖金' || scope.row.typeName === '销售提成' ||scope.row.typeName === '招聘提成' "
                          type="text" :disabled="true"></el-input>
                        <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-else type="text"
                                  v-model="scope.row.periodLater"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="11">

                  转正
                  <el-table style="margin-left: 8px" :cell-class-name="tableCellClassName"
                            :header-cell-style="{background:'#cccccc'}"
                            :data="salaryItems">
                    <el-table-column align="center" prop="typeName"
                                     label="定薪项目"></el-table-column>
                    <el-table-column align="center" prop="memberFront" label="调薪前">
                      <template slot-scope="scope">
                        <el-input
                          v-if="scope.row.typeName === '奖金' || scope.row.typeName === '销售提成' ||scope.row.typeName === '招聘提成'"
                          :disabled="true" type="text"></el-input>
                        <el-input :disabled="true" v-else type="text" :value="scope.row.memberLater"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="11">
                  <br>
                  <el-table style="margin-left: 8px" :cell-class-name="tableCellClassName"
                            :header-cell-style="{background:'#cccccc'}"
                            :data="formSalary.salaryItems">
                    <el-table-column align="center" prop="typeName"
                                     label="定薪项目"></el-table-column>
                    <el-table-column align="center" prop="memberLater" label="调薪后">
                      <template slot-scope="scope">
                        <el-input
                          v-if="scope.row.typeName === '奖金' || scope.row.typeName === '销售提成' ||scope.row.typeName === '招聘提成'"
                          :disabled="true" type="text"></el-input>
                        <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-else type="text"
                                  v-model="scope.row.memberLater"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item prop="effectiveDate" label="调薪生效时间">
              <el-date-picker
                v-model="formSalary.effectiveDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="remark" label="备注">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formSalary.remark">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane name="third">
        <div>
          <el-button @click="firstClick">返回</el-button>
          <span style="font-size: 20px;margin-left: 30px">薪酬档案</span>
        </div>
        <div style="margin: 30px">
          <i class="el-icon-user-solid"></i>&nbsp;
          <span style="font-size: 20px">员工信息</span>
          <hr>
          <br>
          <el-descriptions style="font-size: 18px;margin-left: 30px">
            <el-descriptions-item label="姓名">{{ emp.empName }}</el-descriptions-item>
            <el-descriptions-item label="工号">{{ emp.jobNo }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ emp.deptName }}</el-descriptions-item>
            <el-descriptions-item label="岗位">{{ emp.stationName }}</el-descriptions-item>
            <el-descriptions-item label="工作性质">{{ emp.workNature }}</el-descriptions-item>
            <el-descriptions-item label="驻场公司">{{ emp.enterprise }}</el-descriptions-item>
            <el-descriptions-item label="职称">{{ emp.title }}</el-descriptions-item>
            <el-descriptions-item label="入职日期">{{ emp.entryDate }}</el-descriptions-item>
            <el-descriptions-item label="员工状态">
              <span v-if="emp.empStatus !== ''">
                <span v-if="emp.empStatus === '3'">试用</span>
                <span v-if="emp.empStatus === '4'">正式</span>
              </span>
            </el-descriptions-item>
          </el-descriptions>
          <br>
          <el-tabs v-model="tabs">
            <el-tab-pane label="工资档案" name="first">
              <i class="el-icon-user-solid"></i>&nbsp;
              <span style="font-size: 20px">工资信息</span>
              <hr>
              <br>
              <el-table :data="empSalary" border :cell-class-name="tableCellClassName"
                        :header-cell-style="{background:'#cccccc'}" style="width: 100%">
                <el-table-column align="center" prop="typeName" label="薪资项目"/>
                <el-table-column align="center" prop="periodLater" label="试用期工资"/>
                <el-table-column align="center" prop="memberLater" label="转正工资"/>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="调薪记录" name="second">
              <el-table :data="empSalaryItems" border :cell-class-name="tableCellClassName"
                        :header-cell-style="{background:'#cccccc'}" style="width: 100%">
                <el-table-column align="center" prop="name" label="姓名"/>
                <el-table-column align="center" prop="cause" label="调整原因"/>
                <el-table-column align="center" prop="effectiveDate" label="生效日期"/>
                <el-table-column align="center" prop="remark" label="备注"/>
                <el-table-column align="center" prop="status" label="状态">
                  <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.status === '1'">历史记录</el-tag>
                    <el-tag type="success" v-if="scope.row.status === '0'">当前使用</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="changeDialog(scope.row.id)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-dialog title="详情" :visible.sync="dialogTableVisible">
                <el-table :summary-method="getSummaries" show-summary border :data="itemInfo">
                  <el-table-column align="center" property="typeName" label="定薪项目"></el-table-column>
                  <el-table-column align="center" property="periodLater" label="试用期薪资">
                    <template slot-scope="scope">
                      <span
                        v-if="scope.row.typeName === '奖金' || scope.row.typeName === '销售提成' ||scope.row.typeName === '招聘提成'">----</span>
                      <span v-else>{{ scope.row.periodLater }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" property="memberLater" label="转正薪资">
                    <template slot-scope="scope">
                      <span
                        v-if="scope.row.typeName === '奖金' || scope.row.typeName === '销售提成' ||scope.row.typeName === '招聘提成'">----</span>
                      <span v-else>{{ scope.row.memberLater }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <br>
                <div v-if="itemInfo.length > 0">
                  <span> 调薪生效时间： {{ itemInfo[0].effectiveDate }}</span><br><br>
                  <span>备注： {{ itemInfo[0].remark }}</span>
                </div>
              </el-dialog>
            </el-tab-pane>
          </el-tabs>
        </div>

      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>

  import {
    getEmpSalaryList,
    addEmpSalary,
    getEmpSalaryListByEmpId,
    getEmpSalaryItemsListByEmpId,
    getEmpSalaryItemsListByEsId,
    statisticsEmpNum
  } from '@/api/system/employeeSalary'
  import Template from "@/views/system/email/ItoTemplate";
  import {
    listGroup,
    getGroup
  } from "@/api/system/group";

  export default {
    name: "employeeSalary",
    components: {Template},
    data() {
      return {
        itemInfo: [],
        dialogTableVisible: false,
        formSalary: {
          cause: '岗位调薪',
          comId: 1,
          empId: undefined,
          status: '0',
          salaryItems: [],
          effectiveDate: undefined,
          remark: ''
        },
        empSalary: [],
        empSalaryItems: [],
        tabs: 'first',
        salaryItems: [],
        salary: {},
        comList: [],
        salaryInfo: [
          {type: '基本工资'},
          {type: '绩效工资'},
          {type: '级别工资'},
          {type: '岗位工资'}
        ],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          empStatus: '9',
          all: ''
        },
        active: 'first',
        loading: false,
        activeName: '9',
        empSalaryList: [],
        emp: {
          empName: '',
          jobNo: '',
          deptName: '',
          stationName: '',
          workNature: '',
          entryDate: null,
          empStatus: '',
          title: ''
        },
        total: 0,
        comTotal: 0,
        statisticsNum: {
          count0: 0,
          count1: 0,
          count2: 0,
          count3: 0,
          count4: 0
        },
        comParams: {
          pageNum: 1,
          pageSize: 4
        },
        formSalaryRules: {
          cause: [
            {required: true, message: '请选择调薪原因', trigger: 'change'}
          ],
          comId: [
            {required: true, message: '请选择薪酬模板', trigger: 'change'}
          ],
          salaryItems: [
            {required: true, message: '请选择薪酬模板', trigger: 'array'}
          ],
          effectiveDate: [
            {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
          ]
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      },
      changeDialog(esId) {
        getEmpSalaryItemsListByEsId(esId).then(res => {
          this.itemInfo = res.data
          this.dialogTableVisible = true
        })
      },
      tableCellClassName({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0) {
          return 'warning-cell'
        } else {
          return 'success-cell'
        }
        return ''
      },
      onSubmit() {
        this.$refs["formSalary"].validate(valid => {
          if (valid) {
            addEmpSalary(this.formSalary).then(res => {
              this.firstClick()
            })
          }
        })
      },
      changeCom() {
        getGroup(this.formSalary.comId).then(res => {
          this.formSalary.salaryItems = []
          res.data.salaryItems.split(",").map(s => {
            let sal = {
              typeName: '',
              periodLater: 0.00,
              memberLater: 0.00
            }
            sal.typeName = s
            this.formSalary.salaryItems.push(sal)
          })
        })
      },
      firstClick() {
        this.active = 'first'
        this.tabs = 'first'
        this.emp = {
          empName: '',
          jobNo: '',
          deptName: '',
          stationName: '',
          workNature: '',
          entryDate: null,
          empStatus: '',
          title: ''
        }
        this.formSalary = {
          cause: '员工调薪',
          comId: 1,
          empId: undefined,
          status: '0',
          salaryItems: [],
          effectiveDate: undefined,
          remark: ''
        }
        this.empSalary = []
        this.empSalaryItems = []
        this.salaryItems = []
        this.getList()
      },
      secondClick(row) {
        this.emp = row
        this.formSalary.empId = row.id;
        getEmpSalaryListByEmpId(row.id).then(res => {
          this.salaryItems = res.data
        })

        this.active = 'second'
        this.getGroup();
        this.changeCom()
      },
      thirdClick(row) {
        this.emp = row
        getEmpSalaryListByEmpId(row.id).then(res => {
          this.empSalary = res.data
        })
        getEmpSalaryItemsListByEmpId(row.id).then(res => {
          this.empSalaryItems = res.data
        })
        this.active = 'third'
      },
      getGroup() {
        listGroup(this.comParams).then(response => {
          this.comList = response.rows;
          this.comTotal = response.total
        });
      },
      getList() {
        this.loading = true
        getEmpSalaryList(this.queryParams).then(res => {
          this.empSalaryList = res.rows
          this.total = res.total
          this.loading = false
          this.statistics()
        })
      },
      statistics() {
        statisticsEmpNum().then(response => {
          if (response.data !== undefined) {
            this.statisticsNum = response.data;
          }
        });
      },
    },
    mounted() {
      //tab标签的权限控制
      this.$nextTick(() => {
        //首先把所有的都隐藏
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'none';
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display = 'none';
        this.$refs.tabs.$children[0].$refs.tabs[2].style.display = 'none';
      });
    }
  }
</script>

<style>
  .el-table .warning-cell {
    background-color: #eeeeee !important
  }

  .el-table .warning-cell :hover {
    background-color: #eeeeee !important
  }

  .el-table .success-cell {
    background-color: #ffffff !important
  }

  .el-table .success-cell tr:hover > td {
    background-color: #ffffff !important
  }

</style>
